<%@ include file="/common/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="en">
  <head >
	    <title>System Type Management</title>
	    <link type="text/css" rel="stylesheet" href="${ctx}/resources/js/jquery/ux/chosen/chosen.css" />
	    <link type="text/css" rel="stylesheet" href="${ctx}/resources/js/jquery/ux/watable/watable.css" />
	    <link href="${ctx }/resources/js/jquery/jquery.treeview.css" rel="stylesheet">
	    <style type="text/css">
		.tree_panel {
			min-height: 550px;
			margin: 15px 0 15px 0;
			border: 1px solid #ddd;
			border-collapse: separate;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}
		</style>
  </head>
  <body>
  
      <!--Body content-->
      	  <div id="showMessage"></div>
      	  
      	  
      <!-- table start -->
      <div class="row-fluid" style="min-height: 500px;">
      	<div id="treePanel" class="span3">
      		<div class="side-by-side clearfix">
              <select data-placeholder="Select the root of type" style="width:200px;" class="chzn-select-deselect" tabindex="7">
                <option value=""></option>
                <c:forEach var="root" items="${typeRoots}">
	                <option value="${root.typeId }">${root.typeName}</option>
                </c:forEach>
              </select>
            </div>
            
           	<div id="type_tree" class="tree tree_panel">
		</div>
      	</div>
      	<input id="dataList" type="hidden" value="${typeList}">
      	<div id="listPanel" class="span9"></div>
      	<!-- end of listPanel -->
	  <!-- table end -->
	   
	 </div><!-- end of row-fluid -->
	 <script type="text/javascript" src="${ctx}/resources/js/jquery/ux/chosen/chosen.jquery.min.js"></script>
	 <script type="text/javascript" src="${ctx}/resources/js/jquery/ux/watable/jquery.watable.js"></script>
	 <script src="${ctx}/resources/js/jquery/jquery.cookie.js"></script>
	 <script src="${ctx}/resources/js/jquery/jquery.treeview.js"></script>
	 <script src="${ctx}/resources/js/jquery/jquery.treeview.edit.js"></script>
	 <script src="${ctx}/resources/js/jquery/jquery.treeview.async.js"></script>
	 <script type="text/javascript" src="${ctx}/resources/js/src/system/sys_type.js">
	 	
	 </script>
  </body>
  </html>